<script>
import { text } from "body-parser";
import { Col } from "element-ui";
import draggable from "vuedraggable"; // 可拖拽的容器组件
import render from "../../utils/generator/render";
import QRCode from "qrcodejs2";

// 删除 和 复制项
const components = {
  itemBtns(h, element, index, parent) {
    const { copyItem, deleteItem } = this.$listeners;
    return [
      <span
        class="drawing-item-copy"
        title="复制"
        onClick={event => {
          copyItem(element, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-copy-document" />
      </span>,
      <span
        class="drawing-item-delete"
        title="删除"
        onClick={event => {
          deleteItem(index, parent);
          event.stopPropagation();
        }}
      >
        <i class="el-icon-delete" />
      </span>
    ];
  }
};

const layouts = {
  //单行文本
  colFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    // console.log(this.$listeners);// 自动收集所有加在这个组件上的事件监听
    // console.log(arguments);  指向的传入的参数
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";

    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: element.height + "px",
      "margin-left" : "0px !important"
    };
    // let style = {
    //   "font-size": element.fontsize + "px",
    //   height: "20px"
    // };
    let colStyle = {
      float: element.floatCon ? "right" : "left"
    };
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      // 行内块元素
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
        style={colStyle}
      >
        {/* <div class="aa"> */}
          <el-form-item
          label-width={element.labelWidth ? `${element.labelWidth}px` : null}
          style={style}
          class="colFormClass"
          label={element.label}
          required={element.required}
        >
          <render
            key={element.renderKey}
            conf={element}
            onInput={event => {
              this.$set(element, "defaultValue", event);
            }}
          />
        </el-form-item>
        {/* </div> */}
        
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  rowFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    const className =
      this.activeId === element.formId
        ? "drawing-row-item active-from-item"
        : "drawing-row-item";

    let child = renderChildren.apply(this, arguments);
    if (element.type === "flex") {
      child = (
        <el-row
          type={element.type}
          justify={element.justify}
          align={element.align}
        >
          {child}
        </el-row>
      );
    }
    return (
      <el-col span={element.span}>
        <el-row
          gutter={element.gutter}
          class={className}
          nativeOnClick={event => {
            activeItem(element);
            event.stopPropagation();
          }}
        >
          <span class="component-name">{element.componentName}</span>
          <draggable
            list={element.children}
            animation={340}
            group="componentsGroup"
            class="drag-wrapper"
          >
            {child}
          </draggable>
          {this.printType == "printSet" &&
            components.itemBtns.apply(this, arguments)}
        </el-row>
      </el-col>
    );
  },

  // 普通文本
  textFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";

    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";

    className = element.borderTop ? className + " formborderTop" : className;
    className = element.borderRight
      ? className + " formborderRight"
      : className;
    className = element.borderBottom
      ? className + " formborderBottom"
      : className;
    className = element.borderLeft ? className + " formborderLeft" : className;

    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      // "font-size": "100%",
      height: element.height + "px",
      display: "flex",
      padding: 0,
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    let inputStyle = {
      "font-size": element.fontsize + "px",
      // "font-size": "100%",
      width: "100%",
      height: "100%",
      border: "none",
      padding: 0,
      "text-align": element.labelPosition,
      padding: 0
    };
    let colStyle = {
      float: element.floatCon ? "right" : "left"
    };
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
        style={colStyle}
      >
        <div class="textDivClass" style={style}>
          <input
            v-model={element.defaultValue}
            size="mini"
            type="text"
            style={inputStyle}
          ></input>
        </div>
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  //输入文本
  textInputFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners; // 自动收集所有加在这个组件上的事件监听
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";

    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: element.height + "px",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    let colStyle = {
      float: element.floatCon ? "right" : "left"
    };
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      // 行内块元素
      <el-col
        span={element.span}
        class={className}
        style={colStyle}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        <div class="textDivClass" style={style}>
          {element.label} ：{element.defaultValue}
        </div>
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  // 图片
  pictureFormItem(h, element, index, parent) {
    let baseUrl = this.$imageUrl;

    const { activeItem } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";
    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: element.height + "px",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    let style2 = {
      width: element.pwidth + "px",
      height: element.pheight + "px"
    };
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        <div class="textDivClass" style={style}>
          <img style={style2} src={baseUrl + "image/" + element.vModel}></img>
        </div>

        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  // 二维码
  qrCodeFormItem(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";
    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: element.height + "px",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
      >
        {this.printType == "printSet" ? (
          <div class="textDivClass" style={style}>
            {"二维码--" + element.defaultValue}
          </div>
        ) : (
          <div class="textDivClass" style={style} ref="qrCode"></div>
        )}
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  // 表格形式的
  tableFormItem(h, element, index, parant) {
    const { activeItem, thClick } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";
    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";
    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      "border-collapse": "collapse",

      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    let fontsize = {
      "font-size": element.fontsize + "px"
    };
    let colWidth = {
      float: element.floatCon ? "right" : "left"
    };
     {/* let HeaderStyle = {
       display: element.showHeader ? "contents" : "none"
     }; */}
    className = className + "tableFormItemClass";
    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
        style={colWidth}
      >
        <table
          border="1"
          cellpadding="3"
          cell-style={fontsize}
          style={style}
          align={element.align}
          width={"100%"}
        >
          <tr>
            {element.tableHeader.map((item, index) => (
              <th
                onClick={event => {
                  thClick(item, index);
                  event.stopPropagation();
                }}
              >
                {item.title}
              </th>
            ))}
          </tr>
          {element.tableData.map(item => (
            <tr>
              {Object.keys(item).map((
                tdItem // 遍历对象，不可以直接遍历，需要Object.keys()来遍历
              ) => (
                <td height={element.tdHeight}>
                  <input
                    v-model={item[tdItem]}
                    size="mini"
                    type="text"
                    style="width:100%;height:98%;border:none;text-align: center;padding:0"
                  ></input>
                </td>
              ))}
            </tr>
          ))}
        </table>
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  //选列变行
  textFormChange(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    element.columns.forEach(item => {
      if (item.tableData.length > element.rows) {
        element.rows = item.tableData.length;
      }
    });
    element.columnsNum = element.columns.length;
    let i = 0;
    element.columns.forEach(it => {
      if (it.tableData.length > i) {
        i = it.tableData.length;
      }
    });
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";

    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";

    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: i * 24.2 + "px",
      margin: 0
    };
    let colStyle = {
      float: element.floatCon ? "right" : "left"
    };

    let leftDiv = {
      // width: element.leftSpan + "px",
      height: "100%",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically,
      "border-right": "0.1px solid"
      //"border-right": "1px solid"
    };
    let centerDiv = {
      height: "100%",
      display: "inline-block",
      "border-right": element.columnsNum == 1 ? "none" : "0.11px solid"
    };
    let childDiv = {
      width: "100%",
      height: "24px",
      "border-bottom": element.rows == 1 ? "none" : "0.11px solid",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };

    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
        style={colStyle}
      >
        <div class="textDivClass" style={style}>
          <el-col span={element.leftSpan} style={leftDiv}>
            {element.label}
          </el-col>
          {element.columns.map((item1, inx) => (
            <el-col span={item1.rightSpan} style={centerDiv}>
              {Object.keys(item1.tableData).map((item2, index) => (
                <div style={childDiv}>{item1.tableData[item2]}</div>
              ))}
            </el-col>
          ))}
        </div>
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  },

  // 长形文本
  textFormRectangle(h, element, index, parent) {
    const { activeItem } = this.$listeners;
    let className =
      this.activeId === element.formId
        ? "drawing-item active-from-item"
        : "drawing-item";

    className = element.formborder
      ? className + " formboder"
      : className + " form-no-boder";

    className = element.hiddenValue ? className + " hiddenValue" : className;
    let style = {
      "font-size": element.fontsize + "px",
      height: element.rows * 24.9 + "px",
      display: "flex",
      "justify-content": element.labelPosition,
      "align-items": element.alignVertically
    };
    let colStyle = {
      float: element.floatCon ? "right" : "left"
    };

    if (this.formConf.unFocusedComponentBorder)
      className += " unfocus-bordered";
    return (
      <el-col
        span={element.span}
        class={className}
        nativeOnClick={event => {
          activeItem(element);
          event.stopPropagation();
        }}
        style={colStyle}
      >
        <div class="textDivClass" style={style}>
          <input
            v-model={element.defaultValue}
            size="mini"
            type="text"
            style="width:100%;height:98%;border:none;text-align: center"
          ></input>
        </div>
        {this.printType == "printSet" &&
          components.itemBtns.apply(this, arguments)}
      </el-col>
    );
  }
};

// function rewardSpanMethod({ rowIndex, columnIndex }) {
//   if (columnIndex == 2 || columnIndex == 3) {
//     if (rowIndex == 0) {
//       return [6, 1];
//     } else {
//       return [0, 0];
//     }
//   } else if (columnIndex == 0 || columnIndex == 1) {
//     if (rowIndex == 2) {
//       return [4, 1];
//     } else {
//       return [0, 0];
//     }
//   }
// }

// if (this.printType == 'printSet') {
//   <div class="textDivClass" style={style}>{element.defaultValue}</div>
// }
// else {
//   <div class="textDivClass" style={style} ref='qrCode'></div>
// }

function renderChildren(h, element, index, parent) {
  if (!Array.isArray(element.children)) return null;
  return element.children.map((el, i) => {
    const layout = layouts[el.layout]; // 根据标签的类型来 layout
    if (layout) {
      return layout.call(this, h, el, i, element.children);
    }
    return layoutIsNotFound();
  });
}

function layoutIsNotFound() {
  console.log(this.element.layout);

  throw new Error(`没有与${this.element.layout}匹配的layout`);
}

export default {
  components: {
    render,
    draggable
  },
  props: [
    "element", // 每一个标签
    "index", // 遍历的索引
    "drawingList", //  传入的数据
    "activeId", // 当前活跃的标签
    "formConf",
    "printType" // 页面类型
  ],
  render(h) {
    const layout = layouts[this.element.layout];
    if (layout) {
      // call 函数：使用别的对象里面的方法
      return layout.call(this, h, this.element, this.index, this.drawingList);
    }
    return layoutIsNotFound();
  },
  mounted() {
    if (this.printType == "print") {
      if (this.element.layout == "qrCodeFormItem") {
        var qrcode = new QRCode(this.$refs.qrCode, {
          text: this.element.defaultValue, // 需要转换为二维码的内容
          width: this.element.height,
          height: this.element.height,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      }
    }
  }
};
</script>
<style scoped>
.aa >>> .el-form-item__content {
   margin-left:0px !important;
}
</style>
